<template>
  <tm-app>
    <TabBarPageWrapper :use-custom-nav-bar="false">
      <map :style="{width: '100%', height: listHeight+'rpx' }" class="maps" :markers="markers" :scale="Number(scale)"
           :latitude="Number(latitude)"
           :longitude="Number(longitude)" @markertap="makerTap">
        <!-- <cover-image></cover-image> -->

        <!-- 			<cover-image class="refresh w80 left top70" src="@/static/image/map/refresh.png" mode=""></cover-image>
              <cover-image class="refresh w80 left top75" src="@/static/image/map/location.png" mode=""></cover-image>
         -->

        <!-- <cover-view class="rightCoverView"> -->

        <!--        <cover-image style="display: none;" class="refresh w80 right top1"-->
        <!--                     @click="navRouter('/pages/tabbar/polling/Sleepy/Sleepy',true)" src="@/static/image/map/tiring2.png"-->
        <!--                     mode=""></cover-image>-->
        <!--        <cover-image class="refresh w80 right top2" style="display: none;"-->
        <!--                     @click="navRouter('/pages/tabbar/polling/errorList/errorList',true)"-->
        <!--                     src="@/static/image/home/fault2.png"-->
        <!--                     mode=""></cover-image>-->


        <!--        <cover-image class="refresh w80 right top3" style="display: none;" src="@/static/image/map/SignICon.png" mode=""-->
        <!--                     @click="navRouter('/pages/gird/signRcord/signRcord',true)"></cover-image>-->
        <!--</cover-view>-->


        <!--        <cover-image class="rightCoverView btn-rightRecord"-->
        <!--                     @click="navRouter('/pages/tabbar/polling/errorList/errorList',true)"-->
        <!--                     src="@/static/image/home/record-text.png" mode=""></cover-image>-->
        <!--        <cover-view class="SleepyNumber" v-if="tiringCount">{{ tiringCount }}</cover-view>-->

        <!--        <cover-image class="rightCoverView btn-rightSign" src="@/static/image/home/sign-text.png" mode=""-->
        <!--                     @click="navRouter('/pages/gird/signRcord/signRcord',true)"></cover-image>-->

        <cover-image class="rightCoverView btn-rightTarpped"
                     @click="goNavigation('/pages/tabbar/polling/Sleepy/Sleepy')"
                     src="@/static/image/home/trapped-text.png" mode=""></cover-image>

        <cover-image class="rightCoverView btn-rightFault"
                     @click="goNavigation('/pages/tabbar/polling/errorList/errorList')"
                     src="@/static/image/home/fault-text.png" mode=""></cover-image>
        <cover-view class="faultNumber" v-if="faultCount">{{ faultCount }}</cover-view>
        <cover-image class="rightCoverView btn-rightReport" @click="showBottom"
                     src="@/static/image/home/report-text.png"
                     mode=""></cover-image>


        <!-- <cover-image class="refresh w80 right top3" src="@/static/image/map/SignICon.png" mode="" @click="showBottom"></cover-image> 
        <cover-view class="singIn" src="@/static/image/map/SignICon.png" mode="" @click="signin">签到</cover-view>
        <cover-view class="singIn Reporting" src="@/static/image/map/SignICon.png" mode="" @click="showBottom">上报</cover-view>-->
      </map>
    </TabBarPageWrapper>
  </tm-app>
</template>
<script>
import TabBarPageWrapper from "@/components/TabBarPageWrapper/index.vue";
import {getElevatorTiringCount} from "@/api/iot/elevatorTiring";
import {getElevatorListHome} from "@/api/iot/elevator";
import {signIn} from "@/api/sign/inde";
import {useWindowInfo} from "@/tmui/tool/useFun/useWindowInfo";

export default {
  components: {
    TabBarPageWrapper
  },
  data() {
    return {
      select: 0,
      scale: 19, //地图大小级别
      currentInd: "00", //底部弹出下标
      markers: [], //地图标点
      latitude: "",
      longitude: "",
      addressDetails: "",//地址
      // currentMapMasterInd: "00", //当前选中
      MasterArr: [],//所有电梯列表 
      Sellp: "",
      tiringCount: '',//困人
      faultCount: '', //故障
      showPicker: false,
      reportList: [
        {
          id: 1,
          text: "上报困人",
        },
        {
          id: 2,
          text: "上报故障",
        }
      ],
      listHeight: null,
    };

  },
  onReady() { // 改为在onReady生命周期
    this.calculateListHeight()
  },
  onLoad() {
    let that = this;
    // that.getLocahot()
    uni.getLocation({
      type: 'gcj02',
      geocode: true,
      success: function (res) {
        that.latitude = res.latitude
        that.longitude = res.longitude
        Object.keys(res.address).forEach(key => {
          that.addressDetails += res.address[key]
        })
        that.markers.push({
          id: 235,
          latitude: Number(res.latitude),
          longitude: Number(res.longitude),
          iconPath: "/static/image/map/myLoca.png",
        })
      },
      fail: function (err) {
        uni.showToast({
          title: '获取位置失败:err' + JSON.stringify(err),
          icon: 'none',
        })
      }
    });
  },
  methods: {
    calculateListHeight() {
      const systemInfo = uni.getSystemInfoSync()
      const windowHeight = systemInfo.windowHeight

      // 获取TabBar高度（根据实际项目配置修改）
      const tabBarHeight = 50 // 单位px，对应100rpx（小程序tabBar默认高度）

      // 转换为rpx比例
      const pxToRpxRatio = 750 / systemInfo.windowWidth

      // 计算安全区域（仅iOS需要）
      const safeAreaInsets = systemInfo.safeAreaInsets || {bottom: 0}

      // 最终计算公式
      this.listHeight = (windowHeight - tabBarHeight - safeAreaInsets.bottom) * pxToRpxRatio

      // 强制更新视图
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    async getsellpNum() {
      const res = await getElevatorTiringCount({});
      if (res) {
        this.Sellp = res.data.data;
        this.tiringCount = res.data.data.tiringCount;
        this.faultCount = res.data.data.faultCount;
      }
    },
    showFooterBar() {
      const subNVue = uni.getSubNVueById('middleOperate');
      // 打开 nvue 子窗体  
      subNVue.show('slide-in-bottom', 300, function () {
      });
      uni.$on('page-popup', (url) => {
        uni.navigateTo({
          url: url
        })
      })

      uni.$on('show-report', () => {
        that.showBottom();
      })
    },

    // 底部弹框
    showBottom() {
      // #ifdef APP-PLUS
      const subNVue = uni.getSubNVueById('concat')
      subNVue.show('slide-in-bottom', 300, function () {
      });
      uni.$on('page-popup', (data) => {
        subNVue.hide('fade-out', 300)
        uni.$off('page-popup')
        if (data) {
          uni.navigateTo({url: data})
        }
      })
      // #endif
      // #ifdef H5
      this.tip("浏览器未开发")
      // #endif
    },
    // 签到
    async signin() {
      let parme = {
        latitude: this.latitude,
        longitude: this.longitude,
        addressDetails: this.addressDetails,
      }
      const res = await signIn(parme);
      if (res) {
        uni.showToast({
          title: '签到成功',
          icon: 'success'
        })
      }
    },
    // 电梯列表展示
    async getLocahot() {
      const res = await getElevatorListHome({})
      this.MasterArr = res.data.data.list
      res.data.data.list.filter((item, index) => {
        this.markers.push({
          id: index,
          latitude: Number(item.latitude),
          longitude: Number(item.longitude),
          iconPath: "/static/image/map/place2.png",

        })
      })
    },
    // 点击列表点
    async makerTap(e) {
      // if (e.detail.markerId != 235) {
      //   this.markers.splice(e.detail.markerId, 1, {
      //     id: e.detail.markerId,
      //     latitude: Number(this.markers[e.detail.markerId].latitude),
      //     longitude: Number(this.markers[e.detail.markerId].longitude),
      //     iconPath: "/static/image/map/pitch2.png",
      //   })
      //   const res = await getElevatorInfoHome({
      //     latitude: this.latitude,
      //     longitude: this.longitude,
      //     elevatorId: this.MasterArr[e.detail.markerId].elevatorId
      //   });
      //   this.currentInd = res;
      //   uni.$emit('masterInfo', res.data.data);
      //   const subNVue = uni.getSubNVueById('bottopop')
      //   // 打开 nvue 子窗体  
      //   subNVue.show('slide-in-bottom', 300, function () {
      //   });
      //
      //
      //   uni.$on('masterHide', (data) => {
      //     this.markers.splice(e.detail.markerId, 1, {
      //       id: e.detail.markerId,
      //       latitude: Number(this.markers[e.detail.markerId].latitude),
      //       longitude: Number(this.markers[e.detail.markerId].longitude),
      //       iconPath: "/static/image/map/place2.png",
      //     })
      //   })

      // this.currentMapMasterInd = e.detail.markerId
      // }
    },

    async search(val) {

    },
    // 跳转地点页
    goNavigation(url) {
      uni.navigateTo({
        url: url
      })
    },
    reportConfirm(e) {
      console.log("选择了", e[0]);
      let report = this.reportList[e[0]];
      if (report.id == 1) {
        uni.navigateTo({
          url: "/pages/tabbar/polling/submit/submit"
        })
      } else {
        uni.navigateTo({
          url: "/pages/tabbar/polling/fault/fault"
        })
      }
    },
  }
}
</script>

<style scoped>
.toolBarView {
  width: 80%;
  height: 50px;
  left: 10%;
  position: fixed;
  bottom: 80rpx;
  background-color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 36rpx;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
}

.rightCoverView {
  right: 20px;
  position: fixed;
  bottom: 80px;
  display: flex;
  width: 100rpx;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}

.btn-rightReport {
  bottom: 60px;
}

.btn-rightFault {
  bottom: 120px;
}

.btn-rightTarpped {
  bottom: 180px;
}

.btn-rightRecord {
  bottom: 240px;
}

.btn-rightSign {
  bottom: 300px;
}

.btn-operater-view {
  width: 120px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  left: 50px;
  z-index: 9999;
}

.badgeView {
  width: 20px;
  height: 15px;
  background: #FF5753;
  border-radius: 11px;
  text-align: center;
  line-height: 15px;
  font-size: 9px;
  color: #FFFFFF;
  position: absolute;
  top: 5px;
  left: 40px;
}

.icon-operater {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.icon-text {
  font-size: 14px;
  color: #000;
  margin-left: 10px;
}

.btn-middle {
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  background-color: #017efe;
  color: #fff;
  font-size: 16px;
  border-radius: 50%;
  z-index: 9999;
  left: calc(100% - 200px);
}

.btn-middle2 {
  width: 70px;
  height: 70px;
  line-height: 70px;
  position: absolute;
  background-color: #017efe;
  color: #fff;
  font-size: 16px;
  border-radius: 50%;
  z-index: 9999;
  left: calc(100% - 200px);
  top: -10px;
}


.left {
  position: fixed;
  left: 40rpx;
}

.top70 {
  /* #ifdef  H5 */
  bottom: 30vh;
  /* #endif */
  /* #ifdef  APP-PLUS */
  bottom: 20vh;
  /* #endif */
}

.top75 {
  /* #ifdef  H5 */
  bottom: calc(30vh - 90rpx);
  /* #endif */
  /* #ifdef  APP-PLUS */
  bottom: calc(20vh - 90rpx);
  /* #endif */
}

.singIn {
  width: 160rpx;
  height: 160rpx;
  position: absolute;
  /* #ifdef  H5 */
  bottom: 150rpx;
  /* #endif */
  /* #ifdef  APP-PLUS */
  bottom: 80rpx;
  /* #endif */
  background-color: #017EFE;
  border-radius: 50%;
  text-align: center;
  line-height: 150rpx;
  font-size: 36rpx;
  color: #FFFFFF;
  left: 100rpx;

}

.Reporting {
  left: auto;
  right: 100rpx;
  background-color: #3AC211;
}

.w80 {
  width: 80rpx;
  height: 80rpx;
}

.right {
  position: fixed;
  right: 20px;
}

.top1 {
  top: 20vh;
}

.SleepyNumber {
  width: 40rpx;
  height: 40rpx;
  background: #FF5753;
  border-radius: 20rpx;
  text-align: center;
  line-height: 35rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  position: fixed;
  right: 15px;
  bottom: 185px;
  z-index: 999;
}

.faultNumber {
  width: 40rpx;
  height: 40rpx;
  background: #FF5753;
  border-radius: 20rpx;
  text-align: center;
  line-height: 35rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  position: fixed;
  right: 15px;
  bottom: 120px;
  z-index: 999;
}


.top2 {
  top: calc(20vh + 100rpx);
}

.top3 {
  top: calc(20vh + 200rpx);
}

.content {
  position: fixed;
  top: 30rpx;
  width: 80vw;
  left: 50%;
  transform: translateX(-50%);
}

.bottomInfo {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: #FFFFFF;
  z-index: 99999;
}

.infoBox {
  padding: 30rpx 40rpx 0;
}

.infoBottom {
  padding-bottom: 15rpx;
  padding-top: 15rpx;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #E2E6EF;
  margin-top: 10rpx;
  display: flex;
}

.distance {
  font-weight: bold;
  font-size: 44rpx;
}

.company {
  color: #989BA6;
  font-size: 24rpx;
}

.wds50 {
  flex: 1;
  text-align: center;
}
</style>
